<template>
	<view class="info">

    <view class="choose_card">
      <view class="title">账号信息</view>
      <view class="item" style="height: unset;line-height: 120rpx;">
        <view class="tit">头像</view>
        <view class="avatar">
          <!-- #ifdef MP-WEIXIN -->
          <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <image :src="$xyfun.image(avatar)"/>
            <text class="yz-iconfont yz-jiantou3 m-l-15"></text>
          </button>
          <!-- #endif -->

          <!-- #ifdef H5 -->
          <button @tap="chooseImage()">
            <image :src="$xyfun.image(avatar)"/>
            <text class="yz-iconfont yz-jiantou3 m-l-15"></text>
          </button>
          <!-- #endif -->
        </view>
      </view>
    </view>

    <view class="choose_card">
      <view class="title">授课地址<text>*</text></view>
      <view class="item">
        <view class="tit">详细地址</view>
        <view class="input" @tap="chooseLocation">
          <view v-if="addr[0]===''">请选择地址</view>
          <view v-else>{{addr[0]}}{{addr[1]}}</view>
        </view>
      </view>
      <view class="item">
        <view class="tit">联系电话</view>
        <view class="input">
          <input type="text" v-model="mobile" placeholder="请输入联系电话"/>
        </view>
      </view>
    </view>

    <view class="choose_card" v-if="common.auditConfig.audit_on==0">
      <view class="title">学生信息<text>*</text></view>
      <view class="item">
        <view class="tit">姓名</view>
        <view class="input">
          <input type="text" v-model="student" placeholder="请输入姓名"/>
        </view>
      </view>
      <view class="item">
        <view class="tit">性别</view>
        <view class="sex">
          <view :class="sex==='男'?'active':''" @tap="sex='男'">男</view>
          <view :class="sex==='女'?'active':''" @tap="sex='女'">女</view>
        </view>
      </view>
      <view class="item">
        <view class="tit">科目</view>
        <view class="input">
          <picker type="text" @change="subjectChange" :range="subject_list" range-key="name">{{subject!==''?subject_list[subject].name:'选科目'}}</picker>
        </view>
      </view>
      <view class="item">
        <view class="tit">年级</view>
        <view class="input">
          <picker type="text" @change="gradeChange" :range="grade_list" range-key="name">{{grade!==''?grade_list[grade].name:'选年级'}}</picker>
        </view>
      </view>
      <view class="item">
        <view class="tit">学生基本情况</view>
        <view class="input">
          <input type="text" v-model="state" placeholder="请简单描述学生基本情况"/>
        </view>
      </view>
    </view>


    <view>
      <view class="submit" @tap="editUserInfo()">提交</view>
    </view>
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	import graceChecker from '@/utils/graceChecker';
	import http_config from '@/config/http'; 
	export default {
		
		data() {
			return {
				css:{},
				editInfoDisabled:false,
				userInfo:{},

        avatar: '',
        addr: ['','','',''],
        mobile : '',
        student : '',
        sex : '男',
        grade: '',
        grade_list: [],
        subject: '',
        subject_list: [],
        state: '',
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {
      this.subject_list = this.common.customConfig.subject;
      this.grade_list = this.common.customConfig.grade_normal;

      this.loadData();
		},

		methods: {
			...mapActions('user',{'getUserInfo':'getInfo'}),

      async loadData() {
        var that = this;
        this.$api.postBase({
          url: 'user/userinfo',
          loadingTip: '加载中...',
          data: {},
          success: res => {
            this.addr = res.addr;
            this.avatar = res.avatar;
            this.mobile = res.mobile;
            this.student = res.username;
            for(let i=0;i<that.grade_list.length;i++){
              if(that.grade_list[i].id==res.grade){
                this.grade = i;
              }
            }
            for(let i=0;i<that.subject_list.length;i++){
              if(that.subject_list[i].id==res.subject){
                this.subject = i;
              }
            }
            this.state = res.state;
          }
        })
      },

      chooseLocation(){
        var that = this;
        uni.chooseLocation({
          success: res => {
            that.addr = [
              res.address,
              res.name,
              String(res.latitude),
              String(res.longitude)
            ];
          },
          fail: err => {
            console.log(err);
          }
        });
      },

      gradeChange(e){
        this.grade = e.detail.value;
      },

      subjectChange(e){
        this.subject = e.detail.value;
      },
			
			onChooseAvatar(e) {
				this.uploadImage(e.detail.avatarUrl);
				this.editInfoDisabled = true;
			},
			
			// 图片处理-选择图片
			async chooseImage() {
				var that = this;
				console.log('选择图片');
				uni.chooseImage({
					count: 1, 
					sizeType: ["original", "compressed"],
          sourceType: ['album','camera'],
					success: res => {
						console.log('选择图片',res);
						that.uploadImage(res.tempFilePaths[0])
					}
				});
			},
			
			// 上传图片
			async uploadImage(url) {
				var that = this;
				uni.showLoading({
					title:'图片上传中...'
				})

        uni.uploadFile({
          url: http_config.base_url + "/addons/alioss/index/upload",
          filePath: url,
          name: "file",
          header: { token: that.user.info.token },
          success: res => {
            res = JSON.parse(res.data);
            that.avatar = res.data.fullurl;
          },
          complete: e => {
            uni.hideLoading();
          }
        });

			},
			
		
			
			// 修改信息
			editUserInfo() {
        this.$api.postBase({
          url: 'user/profile',
          loadingTip:'加载中...',
          data: {
            avatar : this.avatar,
            addr : this.addr,
            mobile : this.mobile,
            student : this.student,
            sex : this.sex,
            grade : this.grade!==''?this.grade_list[this.grade].id:'',
            subject : this.subject!==''?this.subject_list[this.subject].id:'',
            state : this.state,
          },
          success: (res) => {
            this.getUserInfo();
            this.$xyfun.msg('信息修改成功');
            uni.navigateBack();
          }
        });
			},
		}
	}
</script>

<style scoped lang="scss">

  .submit{
    text-align: center;
    margin:40rpx 20rpx;
    padding: 20rpx 0;
    color: #ffffff;
    background: $uni-color-warning;
    border-radius: 8rpx;
  }

  .choose_card{
    padding: 0 20rpx;
    margin-top: 60rpx;
    .title{
      margin-bottom: 20rpx;
      font-size: 30rpx;
      margin-left: 10rpx;
      font-weight: bold;
      text{
        color: red;
        margin-left: 15rpx;

      }
    }
    .item{
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #ababab;
      min-height: 60rpx;
      line-height: 60rpx;
      margin: 20rpx 10rpx;
      padding-bottom: 10rpx;
      .tit{
        font-size: 26rpx;
        font-weight: bold;
      }
      .input{
        font-size: 26rpx;
        font-weight: bold;
        input{
          font-size: 26rpx;
          height: 60rpx;
          text-align: right;
        }
      }
      .sex{
        display: flex;
        view{
          background: #c9c9c9;
          width: 60rpx;
          margin-left: 40rpx;
          min-height: 60rpx;
          text-align: center;
          border-radius: 6rpx;
        }
        .active{
          background: $uni-color-warning;
          color: #fff;
        }
      }
      .avatar{
        button{
          width: 120rpx;
          height: 120rpx;
          padding: 0;
          margin: 0;
          border: none;
          image{
            width: 120rpx;
            height: 120rpx;
          }
        }
      }
    }
  }
</style>
